body{
  padding-bottom: 120px;
}

.logo{
  line-height: 66px;
}
.ui-content{
  width: 1200px;
  height: auto;
}

.header{
  height: 90px;
}
.reload:before{
  display: inline-block;
  animation: rotate 0.5s linear infinite;
}
.f5-btn{
  width: 160px;
  padding: 16px 26px 16px 20px;
  transition: all .1s cubic-bezier(.645,.045,.355,1);
  i{
    font-size: 24px;
  }
  &:hover{
    border-color:#efefef;
    background:#efefef;
    text-shadow: 0 -1px 0 rgba(0,0,0,.12);
    box-shadow: 0 2px 0 rgba(0,0,0,.045);
    transition: all .3s cubic-bezier(.645,.045,.355,1);
  }
}

/*
.nav{
  height: auto;
  min-height: 50px;
  background-size: 400% 100%;
  background-image: linear-gradient(90deg, #f0f0f0 25%, #e3e3e3 37%, #f0f0f0 63%);
  animation: ant-skeleton-loading 1.4s ease infinite;
}


.nav-btn{
  width: 190px;
  height: 50px;
  line-height: 50px;
  transition: all .3s cubic-bezier(.645,.045,.355,1);

  &:hover{
    border-color:#efefef;
    background:#efefef;
    text-shadow: 0 -1px 0 rgba(0,0,0,.12);
    box-shadow: 0 2px 0 rgba(0,0,0,.045);
    transition: all .3s cubic-bezier(.645,.045,.355,1);
  }
}
*/

.card-img{
  width: 200px;
  height: 120px;
  background-size: 400% 100%;
  background-image: linear-gradient(90deg, #f0f0f0 25%, #e3e3e3 37%, #f0f0f0 63%);
  animation: ant-skeleton-loading 1.4s ease infinite;

  div{
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    opacity: 0;
    transition:all .4s ease-in-out
  }
  i{
    font-size: 40px;
    left: 50%;
    top: 50%;
    margin-left: -20px;
    margin-top: -30px;
    opacity:0;
    filter:alpha(opacity=0);
    transition:all .2s ease-in-out
  }
  img{
    width: 100%;
    transition:all .4s linear;
    background-color: #efefef;
  }
  &:hover div{
    opacity:1;
    filter:alpha(opacity=100);
  }
  &:hover img{
    transform:scale(1.2);
  }
  &:hover i{
    opacity:1;
filter:alpha(opacity=100);
transform:translatey(0);
  }
}
.card-img-cur, .card-img-cur a{
  background-color: #efefef;
}
.no-bg{
  background-image:linear-gradient(90deg, #fff 20%,  #fff 37%, #fff 63%)
}
@keyframes rotate{from{transform: rotate(0deg)}
    to{transform: rotate(359deg);}
}
@keyframes ant-skeleton-loading {
  0% {
      background-position:100% 50%
  }
  to {
      background-position:0 50%
  }
}